<template>
  <div class="page-content">
    <!-- 搜索栏 -->
    <div class="search-bar-top">
      <el-row :gutter="24">
        <el-col :span="22">
          <div class="search-bar-title">搜索</div>
        </el-col>
        <el-col :span="2">
          <div class="search-bar-show" @click="showSearchBar" v-auth="'breed_product_select'">
            {{ searchBar_visible ? "收起" : "展开" }}
            <i
              class="el-icon-arrow-down"
              v-if="searchBar_visible === false"
            ></i>
            <i class="el-icon-arrow-up" v-if="searchBar_visible === true"></i>
          </div>
        </el-col>
      </el-row>
    </div>
    <transition>
      <!-- 搜索栏组件 -->
      <SearchBar
        v-show="searchBar_visible"
        :searchByTypedata="searchByTypedata"
        :searchData="searchData"
        @getDataBySelectTime="getDataBySelectTime"
        @getDataBySelectType="getDataBySelectType"
        @getDataByKeyword="getDataByKeyword"
      ></SearchBar>
    </transition>

    <!-- 表格区域 -->
    <!-- 表格功能区 -->
    <div style="height: 20px; width: 100%"></div>
    <TableBar
      :columns="columns"
      @changeColumn="changeColumn"
      :layout="layout"
    >
      <el-row slot="bottom" :gutter="20">
        <el-col :span="6"
          ><el-button
            plain
            size="mini"
            type="primary"
            @click="tableAdd_visible = true"
            v-auth="'breed_product_insert'"
            >新增</el-button
          ></el-col
        >
        <el-col :span="6"
          ><el-button
            plain
            size="mini"
            type="danger"
            @click="delDataBySelectBox"
            v-auth="'breed_product_delete'"
            >删除</el-button
          ></el-col
        >
        <el-col :span="6"
          ><el-tooltip
            effect="dark"
            content="导入检测报告"
            placement="top-start"
            ><el-upload
              action="http://120.77.156.205:9603/breed/inspection/excel"
              :show-file-list="false"
              name="multipartFile"
              :on-success="uploadSuccess"
              ><el-button
                type="primary"
                class="el-icon-upload el-icon--right"
                size="small"
                >上传</el-button
              ></el-upload
            ></el-tooltip
          ></el-col
        >
        <el-col :span="6"
          ><el-button type="primary" size="small" @click="downLoadExcel" v-auth="'breed_product_select'"
            >导出</el-button
          ></el-col
        >
      </el-row>
    </TableBar>
    <!-- 表格数据 -->
    <ReportTable
      :data="data"
      :page="page"
      :showPage="showPage"
      @changeSize="changeSize"
      @changePage="changePage"
      :Bottom="35"
      @getDataBySelectBox="getDataBySelectBox"
    >
      <el-table-column
        :label="columns[0].name"
        v-if="columns[0].show"
        prop="id"
        width="180"
      ></el-table-column>
      <el-table-column
        :label="columns[1].name"
        v-if="columns[1].show"
        prop="name"
        width="200"
      ></el-table-column>
      <el-table-column
        :label="columns[2].name"
        v-if="columns[2].show"
        prop="inspectionOrganization"
        width="180"
      ></el-table-column>
      <el-table-column
        :label="columns[3].name"
        v-if="columns[3].show"
        prop="inspector"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :label="columns[4].name"
        v-if="columns[4].show"
        prop="detectionPrinciple"
        width="100"
      >
      </el-table-column>
      <el-table-column
        :label="columns[5].name"
        v-if="columns[5].show"
        prop="isQualified"
        width="120"
      >
        <template slot-scope="scope">
          <el-tag type="success" v-if="scope.row.isQualified == 1">合格</el-tag>
          <el-tag type="danger" v-else>不合格</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="columns[6].name"
        v-if="columns[6].show"
        prop="type"
        width="100"
      >
        <template slot-scope="scope">
          <el-tag v-if="scope.row.type == 1">型式检测</el-tag>
          <el-tag v-else-if="scope.row.type == 2">出厂检测</el-tag>
          <el-tag v-else-if="scope.row.type == 3">入场检测</el-tag>
          <el-tag v-else-if="scope.row.type == 4">过程检测</el-tag>
          <el-tag v-else>产品年检</el-tag>
        </template>
      </el-table-column>
      <el-table-column
        :label="columns[7].name"
        v-if="columns[7].show"
        prop="effectiveDateBegin"
        width="160"
        :formatter="formatDate"
      ></el-table-column>
      <el-table-column
        :label="columns[8].name"
        v-if="columns[8].show"
        prop="effectiveDateEnd"
        width="160"
        :formatter="formatDate"
      >
      </el-table-column>
      <el-table-column
        :label="columns[9].name"
        v-if="columns[9].show"
        width="250"
        fixed="right"
      >
        <template slot-scope="scope">
          <el-button size="mini" type="primary" @click="watchReport(scope.row)" v-auth="'breed_product_select'"
            >查看报告</el-button
          >
          <el-button size="mini" type="primary" @click="tableEdit(scope.row)" v-auth="'breed_product_update'"
            >编辑</el-button
          >
          <el-button size="mini" type="danger" @click="tableDelete(scope.row)" v-auth="'breed_product_delete'"
            >删除</el-button
          >
        </template>
      </el-table-column>
    </ReportTable>
    <TestReportManageEditForm
      v-show="tableEdit_visible"
      @getNewReport="getBreedInspection"
      :editform="editform"
      :tableEdit_visible="tableEdit_visible"
      @closeEditDialog="closeEditDialog"
    ></TestReportManageEditForm>
    <TestReportManageAddForm
      v-show="tableAdd_visible"
      @getNewReport="getBreedInspection"
      :tableAdd_visible="tableAdd_visible"
      @closeAddDialog="closeAddDialog"
    ></TestReportManageAddForm>
    <!-- 展示报告书图片的弹窗 -->
    <ReportPicture
      v-show="reportPic_visible"
      :img="editform.picture"
      :reportPic_visible="reportPic_visible"
      @closePicDialog="closePicDialog"
    ></ReportPicture>
  </div>
</template>

<script>
// 搜索栏
import SearchBar from "@/components/ProductionManagement/TestReport/SearchBar";
// 表格上方功能栏
import OperationTableBar from "@/components/ProductionManagement/ProductManage/OperationTableBar";
// 表格
import ReportTable from "@/components/ProductionManagement/TestReport/ReportTable";
// 表格编辑表单弹窗
import TestReportManageEditForm from "@/components/ProductionManagement/TestReport/editForm";
// 表格新建表单弹窗
import TestReportManageAddForm from "@/components/ProductionManagement/TestReport/addForm";
// 展示检测报告书图片的弹窗
import ReportPicture from "@/components/ProductionManagement/TestReport/ReportPicture";
// 接口数据
import {
  getInspection,
  removeReport,
  removeReports,
  getInspectionByCondition,
  getInspectionByKeyword,
} from "../../Api/productionmanage/TestReportManage";

export default {
  // 1. name
  // 2. components
  // 3. props
  // 4. data
  // 5. computed
  // 6. watch
  // 7. created
  // 8. mounted
  // 9. update
  // 10. beforeRouteUpdate
  // 11. methods
  name: "TestReportManage",
  components: {
    SearchBar,
    OperationTableBar,
    ReportTable,
    TestReportManageEditForm,
    TestReportManageAddForm,
    ReportPicture,
  },
  data() {
    return {
      searchBar_visible: true,
      // 搜索栏分类数据
      searchByTypedata: [
        {
          value: "1",
          label: "型式检测",
        },
        {
          value: "2",
          label: "出厂检测",
        },
        {
          value: "3",
          label: "入场检测",
        },
        {
          value: "4",
          label: "过程检测",
        },
        {
          value: "5",
          label: "产品年检",
        },
      ],
      showPage: true,
      // 存放请求回来的数据
      data: [],
      // 表头
      columns: [
        // 表头
        {
          name: "检测报告编号",
          show: true,
        },
        {
          name: "检测名称",
          show: true,
        },
        {
          name: "检测公司",
          show: true,
        },
        {
          name: "检测员",
          show: true,
        },
        {
          name: "检测依据",
          show: true,
        },
        {
          name: "是否合格",
          show: true,
        },
        {
          name: "检测类型",
          show: true,
        },
        {
          name: "检测开始时间",
          show: true,
        },
        {
          name: "检测结束时间",
          show: true,
        },
        {
          name: "操作",
          show: true,
        },
      ],
      // 表格编辑表单显示与隐藏
      tableEdit_visible: false,
      tableAdd_visible: false,
      reportPic_visible: false,
      editform: {},
      // 传递给TheTable的数据
      page: {
        total: 0,
        pageSize: 10,
        current: 1,
      },
      // 表格选中框
      idBySelectBox: [],
      // 搜索内容（时间，类别，关键词）
      searchData: {
        startTime: "",
        overTime: "",
        type: "",
      },
      // 表头右侧 即TableBar右侧要显示的功能按钮
      layout: "search, refresh, column",
    };
  },

  created() {
    this.getBreedInspection();
  },
  mounted() {},
  methods: {
    // 分页获取检测报告数据
    async getBreedInspection() {
      const { data: res } = await getInspection(
        this.page.current,
        this.page.pageSize
      );
      // console.log(res);
      if (res.statusCode == 20000) {
        this.data = res.data.records;
        this.page.total = res.data.total;
      } else {
        console.log(res)
        // this.$message.error(res.message);
        this.data = [];
      }
    },
    // 按条件查询所有数据
    async getAllList() {
      if (
        !this.searchData.startTime &&
        !this.searchData.overTime &&
        !this.searchData.type
      ) {
        this.getBreedInspection();
        return;
      }
      const { data: res } = await getInspectionByCondition(
        this.page.current,
        this.page.pageSize,
        this.searchData
      );
      if (res.statusCode == 20000) {
        if (res.data === null) {
          return this.$message.warning("搜索范围内无数据");
        }
        this.data = res.data.records;
        this.page.total = parseInt(res.data.total);
        //   console.log(res.data)
      } else {
        console.log(res);
        this.$message.error(res.message);
      }
    },
    // 搜索栏关键词查询数据
    async searchByKeyword(w) {
      // console.log(w);
      const { data: res } = await getInspectionByKeyword(
        this.page.current,
        this.page.pageSize,
        w
      );
      if (res.statusCode === 20000) {
        //   console.log(res)
        if(res.data) {
          this.data = res.data.records;
          this.page.total = parseInt(res.data.total);
          this.$message.success("查询检测报告成功");
        } else {
          this.$message.error("搜索结果为空")
        }
        
      } else {
        return this.$message.error("查询检测报告失败");
      }
    },
    // 删除单个检测报告
    async tableDelete(a) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该检测报告, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await removeReport(a.id);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除该检测报告");
        this.getBreedInspection();
      } else {
        this.$message.error("删除该检测报告失败");
      }
    },
    // 通过表格选择box批量删除检测报告
    async delDataBySelectBox() {
      // console.log(this.idBySelectBox);
      // var a = JSON.stringify(this.idBySelectBox);
      console.log(this.idBySelectBox);
      const confirmResult = await this.$confirm(
        "此操作将永久删除所选检测报告, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => {
        return err;
      });
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除");
      }
      const { data: res } = await removeReports(this.idBySelectBox);
      if (res.statusCode == 20000) {
        this.$message.success("已成功删除选中的检测报告");
        this.getBreedInspection();
      } else {
        console.log(res);
        this.$message.error("删除该检测报告失败");
      }
    },
    // 导入Excel成功的回调
    uploadSuccess() {
      if(res.statusCode === 20000) {
        this.$message.success("导入Excel表格数据成功！");
        this.getBreedInspection();
      } else {
        this.$message.error("导入出错，原因：" + res.message)
      }
    },
    // 导出Excel
    downLoadExcel() {
      let name = "检测报告信息";
      window.location.href = `http://120.77.156.205:9603/breed/inspection/downloadExcel/${name}`;
    },
    // 根据时间范围查询数据
    getDataBySelectTime(t) {
      if (t == null) {
        this.searchData.startTime = null;
        this.searchData.overTime = null;
      } else {
        var startTime = t[0];
        var overTime = t[1];
        // console.log(typeof startTime)
        this.searchData.startTime = startTime;
        this.searchData.overTime = overTime;
      }
      this.getAllList();
    },
    // 根据选择分类查询数据
    getDataBySelectType(type) {
      this.searchData.type = type[0];
      // console.log(type);
      this.getAllList();
    },
    getDataByKeyword(w) {
      // console.log(w)
      if (w == "") {
        this.getAllList();
      } else {
        this.searchByKeyword(w);
      }
    },
    getDataBySelectBox(w) {
      // console.log(w);
      if (w.length == 0) {
        this.getBreedInspection();
      } else {
        var arr = [];
        for (var i = 0; i < w.length; i++) {
          arr.push(w[i].id);
        }
        // console.log(arr);
        this.idBySelectBox = arr;
        console.log(this.idBySelectBox);
      }
    },

    // 点击 展开 控制搜索栏展示与隐藏
    showSearchBar() {
      // console.log(this.searchBar_visible);
      this.searchBar_visible = !this.searchBar_visible;
      // console.log(this.searchBar_visible);
    },
    // 点击查看报告按钮，获取图片
    watchReport(a) {
      this.editform = a;
      this.reportPic_visible = true;
    },
    // 点击表格编辑按钮,传值到表单
    tableEdit(a) {
      this.editform = a;
      this.tableEdit_visible = true;
      // console.log(this.editform);
    },
    closePicDialog(a) {
      this.reportPic_visible = a;
    },
    // 表格编辑表单弹窗隐藏
    closeEditDialog(a) {
      // console.log(a);
      // console.log(this.tableEdit_visible);
      this.tableEdit_visible = a;
    },
    closeAddDialog(a) {
      // console.log(a);
      // console.log(this.tableEdit_visible);
      this.tableAdd_visible = a;
    },
    // 选择显示隐藏列
    changeColumn(newcolumns) {
      this.columns = newcolumns;
    },
    // 分页 改变页码
    changePage(a) {
      this.page.current = a.current;
      this.getBreedInspection();
    },
    // 分页 改变每页显示的条数
    changeSize(a) {
      this.page.pageSize = a.pageSize;
      this.getBreedInspection();
    },
    // 格式化时间
    formatDate(row, column) {
      let a = row[column.property];
      return this.formatDateToDialog(a);
    },
    formatDateToDialog(a) {
      if (!a) {
        return "";
      }
      let dt = new Date(a);
      let s = dt.getSeconds();
      let h = dt.getHours();
      let m = dt.getMinutes();
      let Y = dt.getFullYear();
      let M = dt.getMonth() + 1;
      let D = dt.getDate();
      if (s < 10) {
        s = "0" + s;
      }
      if (h < 10) {
        h = "0" + h;
      }
      if (m < 10) {
        m = "0" + m;
      }
      if (M < 10) {
        M = "0" + M;
      }
      if (D < 10) {
        D = "0" + D;
      }
      return Y + "-" + M + "-" + D + " " + h + ":" + m + ":" + s;
    },
  },
};
</script>

<style>
.search-bar-top {
  border-bottom: 1px solid #999;
  background-color: #f8f8f9;
}

.search-bar-title {
  font-size: 14px;
  text-shadow: 1px 1px rgb(194, 191, 191);
  line-height: 30px;
  width: 100%;
  padding-left: 5px;
  cursor: default;
}

.search-bar-show {
  font-size: 12px;
  line-height: 30px;
  color: #999;
  cursor: pointer;
}
</style>
